<template>
  <a-modal v-model:visible="visible" draggable width="1080px" :footer="false">
    <template #title> {{ title }}</template>
    <a-row class="grid-demo">
      <div class="right-content">
        <div class="top">
          <a-row class="grid-demo">
            <a-col :span="10" class="left">
              <div>
                <OrganizationKeywordSearchTree
                  v-if="visible"
                  @select="selectDataMethod"
                ></OrganizationKeywordSearchTree>
              </div>
            </a-col>
            <a-col :span="4" class="middle">
              <div>
                <a-button
                  class="button"
                  type="outline"
                  size="small"
                  @click="add"
                  >添加</a-button
                >
                <a-button
                  v-if="props.multiple"
                  class="button"
                  type="primary"
                  size="small"
                  @click="erasure"
                  >删除</a-button
                >
                <a-button
                  class="button"
                  type="primary"
                  size="small"
                  @click="erasureAll"
                  >全部删除</a-button
                >
              </div>
            </a-col>
            <a-col :span="10" class="right">
              <div>
                <div class="right-content-title">已选列表</div>
                <div class="user-list">
                  <div
                    v-for="item in addData"
                    :key="item.id"
                    class="user-list-item"
                    :style="{
                      color: selectData.map((item) => item.id).includes(item.id)
                        ? '#165dff'
                        : '',
                    }"
                    >{{ item.name }}</div
                  >
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
        <div class="middle1">
          <div class="footer">
            <a-space>
              <a-button @click="handleClose">
                {{ $t('setting.cancel') }}
              </a-button>
              <a-button type="primary" @click="onSubmit">
                {{ $t('setting.save') }}
              </a-button>
            </a-space>
          </div>
        </div>
        <div class="bottom">
          <div class="bottom-content">
            <span>描述：</span>
            <span v-for="item in addData" :key="item.id">
              <span v-if="item.name">{{ item.name }}</span>
            </span>
          </div>
        </div>
      </div>
    </a-row>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import { OrgTreeVo } from '@/api/organization';

  const visible = ref(false);
  const emit = defineEmits(['change']);
  // 当前选中的组织id
  const selectData = ref<OrgTreeVo[]>([]);
  const addData = ref<OrgTreeVo[]>([]);

  const props = defineProps({
    title: {
      type: String,
      default: '选择组织',
    },
    multiple: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
  });

  function handleChangeVisible(list: any) {
    visible.value = !visible.value;
    if (visible.value) addData.value = JSON.parse(JSON.stringify(list));
    else {
      addData.value = [];
    }
  }

  // 选择(未选区)
  const selectDataMethod = (node: OrgTreeVo) => {
    selectData.value = [];
    if (!selectData.value.find((item) => item.id === node.id)) {
      selectData.value.push(node);
    }
  };
  // 添加
  const add = () => {
    const checkedDataIds = selectData.value.map((y: any) => y.id);
    let isResver = false;
    if (checkedDataIds && checkedDataIds.length > 0) {
      addData.value.forEach((item: any) => {
        if (checkedDataIds.includes(item.id)) {
          isResver = true;
        }
      });
      if (isResver) {
        Message.warning('不能添加相同数据');
      } else {
        addData.value = props.multiple
          ? [...addData.value, ...selectData.value]
          : selectData.value;
      }
    } else {
      Message.warning('请先选择数据');
    }
    selectData.value = [];
  };
  // 删除
  const erasure = () => {
    const checkedDataIds = selectData.value.map((y: any) => y.id);
    addData.value = addData.value.filter(
      (item: any) => !checkedDataIds.includes(item.id)
    );
  };
  // 全部删除
  const erasureAll = () => {
    addData.value = [];
  };
  // 取消
  const handleClose = () => {
    visible.value = !visible.value;
    selectData.value = [];
    addData.value = [];
  };
  // 保存
  function onSubmit() {
    emit('change', addData.value);
    selectData.value = [];
    addData.value = [];
    visible.value = !visible.value;
  }

  defineExpose({ handleChangeVisible });
</script>

<style scoped lang="less">
  .content-left-title {
    width: 100%;
    border: 1px solid #165dff;
    text-align: center;
    height: 32px;
    line-height: 32px;
    font-size: 18px;
    font-weight: 400;
    border-radius: 0px 1px 1px 0px;
  }
  .right-content {
    margin-top: 15px;
    width: 100%;
    min-height: 500px;
    .top {
      min-height: 400px;
      width: 100%;
      border: 1px solid #f2f3f5;
      .grid-demo {
        .left {
          width: 100%;
          border-right: 1px solid #f2f3f5;
        }
        .middle {
          width: 100%;

          text-align: center;
          padding-top: 40px;
        }
        .right {
          width: 100%;
          border-left: 1px solid #f2f3f5;
        }
      }
    }
    .middle1 {
      padding-top: 15px;
      width: 100%;
      min-height: 60px;
      border: 1px solid #f2f3f5;
      text-align: center;
    }
    .bottom {
      width: 100%;
      min-height: 60px;
      border: 1px solid #f2f3f5;
      .bottom-content {
        padding-left: 5px;
      }
    }
  }
  .right-content-title {
    height: 40px;
    line-height: 38px;
    border: 1px solid #f2f3f5;
    font-size: 16px;
    padding-left: 10px;
  }
  .user-list {
    height: 350px;
    overflow: auto;
    .user-list-item {
      width: 100%;
      height: 20px;
      line-height: 18px;
      padding: 0 0 5px 5px;
      cursor: pointer;
    }
  }
  .button {
    width: 120px;
    margin-bottom: 10px;
  }
  .tree {
    width: 100%;
    height: 520px;
    border: 1px solid #f2f3f5;
    margin-top: 15px;
  }
</style>
